<template>
	<div class="order">
		<div class="order_title">
			<van-icon name="arrow-left" size="22px" style="position: absolute;left: 5px;" @click="back" />
			<p>订单列表</p>
		</div>
		<div class="order_tab">
			<van-tabs v-model="active" color='#64B29D' line-width='50px'>
				
				<van-tab title="全部"> <van-swipe-cell>

						<van-card :price="item.payMoney" :desc="item.skus[0].attrsText" :title="item.skus[0].name"
							class="goods-card" :thumb="item.skus[0].image" v-for="(item,index) in all_list">							 <template #footer>
							    <van-button size="small" :round='true' color="#F3AA73"  style="width: 90px;" v-if="item.orderState!=1">再次购买</van-button>
								 <van-button size="small" :round='true' color="#5AB79C" style="width: 90px;" v-if="item.orderState===1">去支付</van-button>
							  </template>
</van-card>

					</van-swipe-cell>
					
				</van-tab>
				
				
				<van-tab title="待付款"><van-swipe-cell>

					<van-card :price="item.payMoney" :desc="item.skus[0].attrsText" :title="item.skus[0].name"
						class="goods-card" :thumb="item.skus[0].image" v-for="(item,index) in all_list" v-if="item.orderState===1">
						<template #footer>
													   
														 <van-button size="small" :round='true' color="#5AB79C" style="width: 90px;">去支付</van-button>
													  </template>
						</van-card>


					</van-swipe-cell>
					</van-tab>
				<van-tab title="待发货"><van-swipe-cell>

						
						<van-card :price="item.payMoney" :desc="item.skus[0].attrsText" :title="item.skus[0].name"
							class="goods-card" :thumb="item.skus[0].image" v-for="(item,index) in all_list" v-if="item.orderState===2">
							<template #footer>
														   
															 <van-button size="small" :round='true' color="#F3AA73" style="width: 90px;">催发货</van-button>
														  </template>
							</van-card>


					</van-swipe-cell></van-tab>
				<van-tab title="待收货"><van-swipe-cell>

						<van-card :price="item.payMoney" :desc="item.skus[0].attrsText" :title="item.skus[0].name"
							class="goods-card" :thumb="item.skus[0].image" v-for="(item,index) in all_list" v-if="item.orderState===3">
							<template #footer>
														   
															 <van-button size="small" :round='true' color="#F3AA73" style="width: 90px;">查看物流</van-button>
														  </template>
							</van-card>


					</van-swipe-cell></van-tab>
				<van-tab title="待评价"><van-swipe-cell>

						<van-card :price="item.payMoney" :desc="item.skus[0].attrsText" :title="item.skus[0].name"
							class="goods-card" :thumb="item.skus[0].image" v-for="(item,index) in all_list" v-if="item.orderState===4">
			<template #footer>
													   
														 <van-button size="small" :round='true' color="#5AB79C" style="width: 90px;">去评价</van-button>
													  </template>
</van-card>
					</van-swipe-cell></van-tab>
			</van-tabs>
		</div>
	</div>

</template>

<script>
	import request from '../../api/request.js'
	export default {
		name: 'order',
		data() {
			return {
				active: 0,
				all_list:[],
			};
		},
		mounted(){
			this.active=this.$route.params.index
		    this.get_order_list()
		},
		methods: {
			back() {
				this.$router.push({
					name:'user'
				})
			},
		async	get_order_list(){
				let res= await request({
					url:'/member/order',
					headers:{
						Authorization:localStorage.getItem('token')
					}
				})
      this.all_list=res.result.items
				
			}
		}
	};
</script>

<style lang="scss">
	
	.order {
		width: 100%;
		height: 100%;
        

		.order_title {
			width: 100%;
			height: 6%;
			background-color: #F8F8F8;
			display: flex;
			justify-content: center;
			align-items: center;

			p {
				font-size: 30px;

			}
		}

		.goods-card {
			margin: 0;
			background-color:#F8F8F8;
			
		}
		.van-card__header{
			background-color: white;
			border-top-right-radius:30px ;
			border-top-left-radius:30px ;
		}
		.van-card__footer{
			background-color: white;
			border-bottom-right-radius:30px ;
			border-bottom-left-radius:30px ;
		}

		.delete-button {
			height: 100%;
		}
		

	}
</style>